<template>
    <div class="xtx-form">
      <div class="user-info">
        <img :src="useObj.avatar" alt="" />
        <p>Hi，{{useObj.nickname}} 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
      </div>
      <div class="xtx-form-item">
        <div class="field">
          <i class="icon iconfont icon-phone"></i>
          <input v-model="bindForm.mobile" class="input" type="text" placeholder="绑定的手机号" />
        </div>
        <div class="error"></div>
      </div>
      <div class="xtx-form-item">
        <div class="field">
          <i class="icon iconfont icon-code"></i>
          <input v-model="bindForm.code" class="input" type="text" placeholder="短信验证码" />
          <span class="code" @click="sendCode">
            {{count===0?'发送验证码':`${count}秒后重试`}}
          </span>
        </div>
        <div class="error"></div>
      </div>
      <a href="javascript:;" class="submit" @click="handleBind">立即绑定</a>
    </div>
  </template>

<script>
import QC from 'qc'
import { reactive, ref } from 'vue'
// import { useCountDown } from '@/compositions/useCountDown'
import { useIntervalFn } from '@vueuse/core'
import { postUserBindAPI, getCodeAPI } from '@/api/login'
import { message } from '@/components/Message'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'CallbackBind',
  props: {
    openId: {
      type: String,
      required: true
    }
  },
  setup (props) {
    const store = useStore()
    const router = useRouter()
    // 绑定表单，收集手机号和验证码
    const bindForm = reactive({
      mobile: '13012345753',
      code: '123456'

    })
    // 用户对象信息
    const useObj = reactive({
      avatar: '',
      nickname: ''
    })
    // QQ认证成功，获取用户信息
    if (QC.Login.check()) {
      // QQ登陆成功
      // // 获取QQ的用户信息
      QC.api('get_user_info').success(res => {
        console.log(res)
        // userObj:QQ提供的用户信息
        useObj.avatar = res.data.figureurl_qq_2
        useObj.nickname = res.data.nickname
      })
    }

    // 初始化倒计时计数
    const count = ref(0)
    // 发送验证码
    const sendCode = async () => {
      // 校验手机号格式
      if (!/^1[3-9]\d{9}$/.test(bindForm.mobile)) {
        return message({ type: 'error', text: '请输入正确手机号' })
      }
      // 请求验证码
      await getCodeAPI(bindForm.mobile)
      // 节流，防止多次请求验证码
      if (count.value !== 0) return
      // 设置倒计时时间
      count.value = 3
      // 发送验证码倒计时
      const { pause } = useIntervalFn(() => {
        count.value--
        if (count.value === 0) {
          // 到0 暂停倒计时
          pause()
        }
      }, 1000)
    }

    // 绑定手机号
    const handleBind = async () => {
      const { mobile, code } = bindForm
      // 校验手机号格式
      if (!/^1[3-9]\d{9}$/.test(mobile)) {
        return message({ type: 'error', text: '请输入正确手机号' })
      }
      // 校验验证码
      if (!/^\d{6}$/.test(code)) {
        return message({ type: 'error', text: '请输入正确验证码' })
      }
      // 发起绑定手机号请求
      const res = await postUserBindAPI({
        unionId: props.openId,
        ...bindForm
      })
      console.log(res)
      // 通过vuex管理用户信息,更新用户信息
      store.commit('user/updateProfile', res.result)
      // 跳转到首页
      router.push('/')
    }

    return {
      useObj,
      count,
      sendCode,
      handleBind,
      bindForm
    }
  }
}
</script>

  <style scoped lang='less'>
  .user-info {
      width: 320px;
      height: 70px;
      margin: 0 auto;
      display: flex;
      background: #f2f2f2;
      align-items: center;
      padding: 0 10px;
      margin-bottom: 25px;
      img {
        background: #f2f2f2;
        width: 50px;
        height: 50px;
      }
      p {
        padding-left: 10px;
      }
    }
    .code {
      position: absolute;
      right: 0;
      top: 0;
      line-height: 50px;
      width:90px;
      color: #999;
      &:hover {
        cursor: pointer;
      }
    }
  </style>
